<!--  -->
<template>
  <div class="cart_item">
    <div class="img">
      <input type="checkbox" v-model="current" @click="selectc(current)">
    <img :src="itemInfo.topImages[0]" alt="">
    </div>
    <h3>{{itemInfo.title}}</h3>
    <div class="dec">商品描述：{{itemInfo.title}}</div>
    <div class="price">{{jisuanPrice}}</div>
    <div class="count">
      <button @click="jian_count" :disabled="count===1">-</button>
      <span> {{count}} </span>
      <button @click="jia_count" >+</button>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    cart_good:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data(){
    return{
      current:true,
      price:this.cart_good.result.itemInfo.oldPrice,
      jisuanPrice:this.cart_good.result.itemInfo.lowPrice,
      itemInfo:this.cart_good.result.itemInfo,
    }
  },
  computed:{
    count(){
      return this.$store.getters.getcount(this.cart_good.iid)
    }
  },

  methods:{
    selectc(){
      this.$store.commit("check",this.cart_good.iid)
    },
    jia_count(){
      this.$store.commit("jiacount",this.cart_good.iid)
       console.log(this.$store.state.cart);
       
    },
    jian_count(){
     this.$store.commit("jiancount",this.cart_good.iid)
      
    }
    
  }
}

</script>
<style scoped>
.cart_item{
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
}
.cart_item h3,.cart_item .dec{
   overflow: hidden;
  white-space: nowrap;
text-overflow: ellipsis;
}
.cart_item h3{
  margin-top:10px;
}
.cart_item .dec{
  margin:10px 0;
}
.img{
float: left;
margin-left:5px;
}
.img img{
  width: 60px;
  height: 80px;
  margin:10px;
  border-radius: 5px;
  vertical-align: middle;
}

.price{
  color:orangered;
}
.count{
  position: absolute;
  bottom: 5px;
  right:10px;
  text-align: right;
}
</style>